<style>
</style>

<template>
  <div class="manage-wrap">
    <div class="operation-panel">
      <Row>
        <Col span="18">
          <Row>
            <Form
              ref="searchForm"
              :model="searchForm"
              :label-width="80"
              value="true"
              style="max-width:1200px;padding-top:20px;"
            >
              <Col span="6">
                <Form-item label="SIM卡号">
                  <Input v-model="searchForm.sim"></Input>
                </Form-item>
              </Col>
              <Col span="8">
                <Row>
                  <Form-item label="数据时间">
                    <Col span="11">
                      <DatePicker
                        type="date"
                        placeholder="开始"
                        v-model="searchForm.start"
                        :transfer="true"
                        :confirm="false"
                      ></DatePicker>
                    </Col>
                    <Col span="2" style="text-align: center">-</Col>
                    <Col span="11">
                      <DatePicker
                        type="date"
                        placeholder="结束"
                        v-model="searchForm.end"
                        :transfer="true"
                        :confirm="false"
                      ></DatePicker>
                    </Col>
                  </Form-item>
                </Row>
              </Col>
              <Col span="5">
                <Form-item label="是否报警">
                  <Select v-model="searchForm.isAlarm">
                    <Option :value="-1">全部</Option>
                    <Option :value="1">是</Option>
                    <Option :value="0">否</Option>
                  </Select>
                </Form-item>
              </Col>
              <Col span="5">
                <Form-item label="定位精度">
                  <Select v-model="searchForm.positioningState">
                    <Option :value="-1">全部</Option>
                    <Option :value="0">无效</Option>
                    <Option :value="1">单点</Option>
                    <Option :value="2">差分</Option>
                    <Option :value="4">RTK固定解</Option>
                    <Option :value="5">RTK浮点解</Option>
                    <Option :value="6">推算</Option>
                  </Select>
                </Form-item>
              </Col>
            </Form>
          </Row>
        </Col>
        <Col span="6" style="height:100%;">
          <Button
            @click="refreshData"
            type="success"
            class="float-r"
            style="margin-right:10px;margin-top:15px;"
            size="large"
            icon="md-refresh"
          >刷新</Button>
          <Button
            type="primary"
            size="large"
            icon="ios-search"
            class="float-r"
            style="margin-right:10px;margin-top:15px;"
            @click="doSearchTableList"
          >搜 索</Button>
          <Button
            type="warning"
            icon="ios-backspace-outline"
            size="large"
            class="float-r"
            style="margin-right:10px;margin-top:15px;"
            @click="resetSearch"
          >重置</Button>
        </Col>
      </Row>
    </div>

    <!--table-->
    <Row>
      <Table stripe size="small" :columns="tableColums" :data="tableData" :loading="tableLoading"></Table>
    </Row>
    <Row>
      <Page
        :total="total"
        :page-size="currentPageSize"
        :current="currentPage"
        @on-change="changeCurrentPage"
        @on-page-size-change="changePageSize"
        show-total
        show-sizer
        style="float:right;margin-top:10px"
      ></Page>
    </Row>
  </div>
</template>

<script>
import { getRealTimeList, getNowDataSingle } from "@/api/operate";
export default {
  data() {
    return {
      tableColums: [
        {
          type: "index",
          width: 60,
          title: "序号",
          align: "center"
        },
        {
          align: "center",
          title: "SIM卡号",
          key: "sim"
        },
        {
          align: "center",
          title: "位号编码",
          key: "installCode"
        },
        {
          align: "center",
          title: "设备状态",
          width: 130,
          key: "devStatus",
          render: (h, params) => {
            const row = params.row;
            return h(
              "Tag",
              {
                props: {
                  type: "dot",
                  color: this.renderDevStatusColor(row.devStatus)
                }
              },
              this.renderDevStatus(row.devStatus)
            );
          }
        },
        {
          align: "center",
          title: "经度",
          key: "lat"
        },
        {
          align: "center",
          title: "纬度",
          key: "lng"
        },
        {
          align: "center",
          title: "定位精度",
          minWidth: 60,
          key: "positioningState",
          render: (h, params) => {
            const row = params.row;
            return h(
              "Tag",
              {
                props: {
                  color: this.renderPositioningStateColor(row.positioningState)
                }
              },
              this.renderPositioningState(row.positioningState)
            );
          }
        },
        {
          align: "center",
          title: "偏移量(米)",
          key: "shift"
        },
        {
          align: "center",
          title: "高度(米)",
          key: "high"
        },

        {
          align: "center",
          title: "电池电量(%)",
          key: "battery"
        },
        {
          align: "center",
          title: "信号强度",
          key: "signalStrength"
        },
        {
          align: "center",
          title: "是否报警",
          width: 110,
          key: "isAlarm",
          render: (h, params) => {
            const row = params.row;
            return h(
              "Tag",
              {
                props: {
                  type: "dot",
                  color: this.renderIsAlarmColor(row.isAlarm)
                }
              },
              this.renderIsAlarm(row.isAlarm)
            );
          }
        },
        {
          align: "center",
          title: "数据时间",
          key: "dataTime"
        },
        {
          title: "操作",
          align: "center",
          render: (h, params) => {
            let actions = [];
            actions.push(
              h(
                "Button",
                {
                  props: {
                    type: "warning",
                    size: "small"
                  },
                  style: {
                    marginRight: "5px"
                  },
                  on: {
                    click: () => {
                      this.getNowData(params.row);
                    }
                  }
                },
                "查询位置"
              )
            );
            return h("div", actions);
          }
        }
      ],
      tableData: [],
      tableLoading: false,
      total: 0,
      currentPage: 1,
      currentPageSize: 20,
      btnLoading: false,
      searchForm: {
        sim: "",
        start: "",
        end: "",
        isAlarm: -1,
        positioningState: -1,
        size: 10,
        current: 1
      }
    };
  },
  computed: {},
  created() {},
  mounted() {
    this.getTableList();
  },
  methods: {
    resetSearch() {
      this.searchForm.sim = "";
      this.searchForm.start = "";
      this.searchForm.end = "";
      this.searchForm.isAlarm = -1;
      this.searchForm.positioningState = -1;
    },
    doSearchTableList() {
      this.currentPage = 1;
      this.getTableList();
    },
    async getTableList() {
      this.tableLoading = true;
      let params = this.searchForm;
      params.current = this.currentPage;
      params.size = this.currentPageSize;
      const result = await getRealTimeList(params);
      if (result.code == 0) {
        let res = result.data;
        this.total = res.total;
        this.tableData = res.records;
      }
      this.tableLoading = false;
    },
    changeCurrentPage(num) {
      this.currentPage = num;
      this.getTableList();
    },
    changePageSize(pageSize) {
      this.currentPageSize = pageSize;
      this.getTableList();
    },
    renderIsAlarm(isAlarm) {
      let status = "";
      if (isAlarm == true) {
        status = "是";
      } else {
        status = "否";
      }
      return status;
    },
    renderIsAlarmColor(isAlarm) {
      let color = "default";
      if (isAlarm == true) {
        color = "error";
      } else {
        color = "success";
      }
      return color;
    },
    renderPositioningState(state) {
      let statusTxt = "";
      if (state == 0) {
        statusTxt = "无效";
      } else if (state == 1) {
        statusTxt = "单点";
      } else if (state == 2) {
        statusTxt = "差分";
      } else if (state == 4) {
        statusTxt = "RTK固定解";
      } else if (state == 5) {
        statusTxt = "RTK浮点解";
      } else if (state == 6) {
        statusTxt = "推算";
      }
      return statusTxt;
    },
    renderPositioningStateColor(state) {
      let color = "default";
      if (state == 0) {
        color = "error";
      } else if (state == 1) {
        color = "volcano";
      } else if (state == 2) {
        color = "orange";
      } else if (state == 4) {
        color = "green";
      } else if (state == 5) {
        color = "cyan";
      } else if (state == 6) {
        color = "gold";
      }
      return color;
    },
    renderDevStatus(devStatus) {
      let status = "";
      if (devStatus == true) {
        status = "在线";
      } else if (devStatus == false) {
        status = "离线";
      }
      return status;
    },
    renderDevStatusColor(devStatus) {
      let color = "default";
      if (devStatus == true) {
        color = "success";
      } else if (devStatus == false) {
        color = "error";
      }
      return color;
    },
    async getNowData(row) {
      let sim = row.sim;
      const res = await getNowDataSingle({ sim: sim });
      if (res.code == 0) {
        this.$Message.success("请求发送成功!");
      } else {
        this.$Message.error(res.msg);
      }
    },
    refreshData() {
      this.resetSearch();
      this.getTableList();
    }
  }
};
</script>
